<template>
  <footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 py-12 transition-colors duration-200">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-4 gap-8">
        <!-- Company Info -->
        <div>
          <div class="flex items-center mb-4">
            <img src="/assets/modest.png" alt="Company Logo" class="h-10 w-10 mr-3">
            <h3 class="text-xl font-bold">Modest</h3>
          </div>
          <p class="text-gray-600 dark:text-gray-400">
            致力于为客户提供最优质的解决方案
          </p>
        </div>

        <!-- Quick Links -->
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li v-for="link in quickLinks" :key="link.path">
              <router-link 
                :to="link.path" 
                class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
              >
                {{ link.name }}
              </router-link>
            </li>
          </ul>
        </div>

        <!-- Contact Info -->
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-400">
            <li>电话：{{ pageData.common.contact.phone }}</li>
            <li>邮箱：{{ pageData.common.contact.email }}</li>
            <li>地址：{{ pageData.common.contact.address }}</li>
          </ul>
        </div>

        <!-- Social Media -->
        <div>
          <h3 class="text-xl font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a v-for="social in socialMedia" 
               :key="social.name" 
               :href="social.url" 
               class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
               target="_blank"
               rel="noopener noreferrer">
              {{ social.name }}
            </a>
          </div>
        </div>
      </div>

      <!-- Copyright -->
      <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-800 text-center">
        <p class="text-gray-600 dark:text-gray-400">
          {{ currentYear }} Company. All rights reserved.
        </p>
      </div>

      <!-- ICP 备案号 -->
      <div class="text-center mt-4">
        <a 
          :href="icpLink" 
          target="_blank" 
          rel="noopener noreferrer" 
          class="text-gray-500 dark:text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors text-sm"
        >
          {{ icpNumber }}
        </a>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { computed } from 'vue'
import { pageData } from '../composables/data/pageData'

const quickLinks = computed(() => pageData.common.navigation)

const socialMedia = [
  { name: '微信', url: '#' },
  { name: '微博', url: '#' },
  { name: 'LinkedIn', url: '#' }
]

// 当前年份
const currentYear = new Date().getFullYear()

// ICP 备案信息
const icpNumber = '粤ICP备2024243583号'
const icpLink = 'https://beian.miit.gov.cn/'
</script>

<style scoped>
footer a {
  transition: color 0.3s ease;
}
</style>